<script setup>
import {ref} from 'vue'
  const tableList = ref([
  {
    zhishouriqi: '2024-10-03',
    zhishoushiduan: '08:00-10:00',
    zhishouzhudian: '驻点1',
    zhishouren: '王天栋',
    qiandao: '已签',
    qiantui: '已签',
    baopingan: '-',
    yichangfankui: '异常',
    zhishouzhuangtai: '已完成',
  },
  {
    zhishouriqi: '2024-10-03',
    zhishoushiduan: '08:00-10:00',
    zhishouzhudian: '驻点2',
    zhishouren: '段光明',
    qiandao: '已签',
    qiantui: '未签',
    baopingan: '已报',
    yichangfankui: '-',
    zhishouzhuangtai: '未完成',
  },
  {
    zhishouriqi: '2024-10-03',
    zhishoushiduan: '08:00-10:00',
    zhishouzhudian: '驻点3',
    zhishouren: '王万民',
    qiandao: '已签',
    qiantui: '已签',
    baopingan: '已报',
    yichangfankui: '-',
    zhishouzhuangtai: '已完成',
  },
  {
    zhishouriqi: '2024-10-03',
    zhishoushiduan: '13:00-14:00',
    zhishouzhudian: '驻点1',
    zhishouren: '李泽云',
    qiandao: '已签',
    qiantui: '未签',
    baopingan: '-',
    yichangfankui: '-',
    zhishouzhuangtai: '进行中',
  },
  {
    zhishouriqi: '2024-10-03',
    zhishoushiduan: '13:00-14:00',
    zhishouzhudian: '驻点2',
    zhishouren: '李佳芳',
    qiandao: '未签',
    qiantui: '未签',
    baopingan: '-',
    yichangfankui: '-',
    zhishouzhuangtai: '进行中',
  },
  {
    zhishouriqi: '2024-10-03',
    zhishoushiduan: '13:00-14:00',
    zhishouzhudian: '驻点3',
    zhishouren: '董子敏',
    qiandao: '未签',
    qiantui: '未签',
    baopingan: '-',
    yichangfankui: '-',
    zhishouzhuangtai: '进行中',
  },
])

const spanMethod = ({
  row, 
  rowIndex,
  columnIndex,
}) => {
    const list = {
      0: 'zhishouriqi',
      1: 'zhishoushiduan',
    }
    if(list[columnIndex]){
      const currentValue = row[list[columnIndex]]  // 当前单元格值
      const preRow = tableList.value[rowIndex-1] // 获取上一行数据
      const preValue = preRow ? preRow[list[columnIndex]] : null // 获取上一行的值

      if(currentValue === preValue){
        return {
          rowspan: 0,
          colspan: 0
        }
      }else{ // 计算跨多少行
        let rowspan = 1
        for(let i = rowIndex +1; i< tableList.value.length;i++){
          const nextRow = tableList.value[i] // 获取下一行数据
          
          const nextValue = nextRow?.[list[columnIndex]]
          if(nextValue === currentValue){
            rowspan += 1
          }else{
            break //跳出循环
          }
        }
        return {
          rowspan,
          colspan: 1
        }
      }
    }
}



</script>

<template>
<div>
  <el-table :data="tableList" :span-method="spanMethod">
    <el-table-column prop="zhishouriqi" label="值守日期"></el-table-column>
    <el-table-column prop="zhishoushiduan" label="值守时段" show-overflow-tooltip></el-table-column>
    <el-table-column prop="zhishouzhudian" label="值守驻点" show-overflow-tooltip></el-table-column>
    <el-table-column prop="zhishouren" label="值守人" show-overflow-tooltip></el-table-column>
    <el-table-column prop="qiandao" label="签到" show-overflow-tooltip></el-table-column>
    <el-table-column prop="qiantui" label="签退" show-overflow-tooltip></el-table-column>
    <el-table-column prop="baopingan" label="保平安" show-overflow-tooltip></el-table-column>
    <el-table-column prop="yichangfankui" label="异常反馈" show-overflow-tooltip></el-table-column>
    <el-table-column prop="zhishouzhuangtai" label="值守状态" show-overflow-tooltip></el-table-column>
  </el-table>
</div>

</template>

<style scoped>

</style>